<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>商城商城商品列表</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<link rel="stylesheet" type="text/css" href="../../css/swiper.min.css" />
	<style type="text/css">
		body {
			background-color: #f5f5f5;
		}
		/*头部区域*/

		.btn-img-share {
			width: 1.3rem;
			padding-top: 0.5rem;
		}

		.aui-tab-item {
			color: #333333;
		}

		.aui-tab-item.active {
			color: #690078;
		}

		.aui-tab-item.active:after {
			content: '';
			position: absolute;
			width: 1.4rem;
			bottom: -1px;
			height: 2px;
			left: 50%;
			margin-left: -0.7rem;
			background-color: #690078;
		}
		/*轮播*/

		.swiper-slide img {
			width: 100%;
			object-fit: cover; 
		}

		.swiper-pagination {
			width: 2.4rem;
			background-color: rgba(255, 255, 255, 0.76);
			color: #999999;
			font-size: 0.75rem;
			right: 0.75rem;
			left: auto;
			border-radius: 1.2rem;
			bottom: 0.75rem;
		}
		/*活动信息条*/

		.goods-active-content {
			display: flex;
			padding: 0 0.5rem;
			justify-content: space-between;
			align-items: center;
			height: 2.5rem;
			font-size: 0.6rem;
			color: #FFFFFF;
		}
		/*进度条*/

		.aui-progress.sm,
		.aui-progress-sm,
		.aui-progress.sm .aui-progress-bar,
		.aui-progress-sm .aui-progress-bar {
			border-radius: 0.5rem;
		}

		.aui-progress-sm {
			background-color: #FFFFFF;
			/*margin: 0.2rem 0;*/
		}

		.aui-progress-bar {
			background-color: #FF3862;
		}
		/*商品信息*/

		.goods-tag {
			font-size: 0.75rem;
			color: #FFFFFF;
			border-radius: 3px;
			padding: 0.1rem 0.2rem;
		}

		.goods-info-title:after {
			content: '';
			position: absolute;
			background-color: #690078;
			width: 2px;
			left: 0;
			height: 0.7rem;
			margin-top: 0.1rem;
		}

		.group-join-list-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0.75rem 0;
		}

		.ping-star {
			display: inline-block;
			height: 0.9rem;
			margin-left: 0.3rem;
		}

		.aui-row-padded [class*=aui-col-xs-] {
			padding: 0.25rem;
		}

		.shop-comment {
			position: relative;
			font-size: 0.7rem;
			background-color: #F5F5F5;
			color: #999999;
			margin: 0.25rem;
			margin-top: 0.5rem;
			padding: 0.5rem;
			border-radius: 0.25rem;
		}

		.shop-comment:before {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			border-left: 9px solid transparent;
			border-right: 9px solid transparent;
			border-bottom: 14px solid #F5F5F5;
			top: -13px;
			left: 15px;
		}
		/*底部*/

		.aui-bar-tab-item img {
			display: inline-block;
			width: 1.1rem;
		}

		.aui-bar-tab .aui-bar-tab-item {
			height: 2.4rem;
		}

		.aui-bar-tab .aui-bar-tab-label {
			display: block;
			font-size: 0.6rem;
			position: initial;
			line-height: 0.5;
		}

		.fade-enter-active,
		.fade-leave-active {
			/*transition: opacity 0.1s linear;*/
		}

		.fade-enter,
		.fade-leave-to
		/* .fade-leave-active below version 2.1.8 */

		{
			/*opacity: 0;*/
		}

		.attr-tag {
			height: 1.5rem;
			line-height: 1.5rem;
			display: inline-block;
			padding: 0 1rem;
			border-radius: 1rem;
			box-sizing: border-box;
			border: 1px solid #e6e6e6;
			color: #999999;
			font-size: 0.65rem;
			margin-right: 0.75rem;
			margin-bottom: 0.75rem;
		}

		.attr-tag.active {
			color: #FE0000;
			border-color: #FE0000;
		}
		/*.aui-btn-plus {
			border: 1px solid #999999;
			border-radius: 50%;
			width: 1rem;
			height: 1rem;
			line-height: 1.2;
			color: #999999;
		}*/

		.service_name_view:after {
			content: '/';
		}

		.service_name_view:last-child:after {
			content: '';
		}

		.listem {
			color: #fff !important;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%) !important;
		}

		.aui-btn-plus {
			/*border: 1px solid #999999;*/
			/*border-radius: 50%;*/
			width: 1rem;
			height: 1rem;
			line-height: 1.2;
			color: #999999;
			font-size: 1rem;
		}

		.footer_icon_wraper img {
			width: 1.1rem;
		}

		.footer_icon_wraper>div {
			margin-right: 0.5rem;
			width: 2rem;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
		}

		.footer_icon_wraper>div span {
			font-size: 0.5rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}

		.join_car {
			flex: 1;
			display: inline-block;
			width: 5rem;
			height: 2rem;
			border-radius: 1rem 0px 0px 1rem;
			background: linear-gradient(135deg, rgba(227, 234, 86, 1) 0%, rgba(162, 225, 58, 1) 100%, rgba(122, 174, 229, 1) 100%);
			font-size: .7rem;
			line-height: 2rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}

		.buy_now {
			flex: 1;
			display: inline-block;
			float: left;
			width: 5rem;
			height: 2rem;
			line-height: 2rem;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			border-radius: 0px 5rem 5rem 0px;
			font-size: .7rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}

		.empty {
			background: rgba(238, 238, 238, 1);
			font-size: .7rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			width: 10rem;
			height: 2rem;
			line-height: 2rem;
			display: inline-block;
			border-radius: 1rem;
		}

		.start {
			display: inline-block;
			margin-left: 50%;
			transform: translateX(-50%);
			font-size: .6rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: #fff;
			margin-top: -.3rem;
		}
		.swiper-wrapper img{
			border-radius: 0.6rem !important;
		}
	</style>
</head>

<body>
	<!--<div id="app" v-cloak :style="attr_show||serve_show?'height:100vh;overflow:hidden;': ''">-->
	<div id="app" v-cloak>
		<!-- 头部栏 -->
		<div id="aui-header" style="position: fixed;z-index: 990;top: 0;width: 100%;" :class="{'ming-bg-white':scrolled}">
			<transition name="fade">
				<header v-if="scrolled" class="aui-bar aui-bar-nav ming-bg-blue aui-border-b">
					<a class="aui-pull-left" tapmode onclick="close_win()">
						<img class="btn-img-back" src="../../image/btn/btn-back.png" />
					</a>
					<div class="aui-title ming-text-app">
						<div class="aui-tab">
							<div class="aui-tab-item" :class="{'active':index==0}" tapmode onclick="tapindex(0)">
								商品
							</div>
							<div class="aui-tab-item" :class="{'active':index==1}" tapmode onclick="tapindex(1)">
								详情
							</div>
						</div>
					</div>
					<a class="aui-pull-right" tapmode onclick="openSharebox()">
						<img class="btn-img-share" src="../../image/icon/icon-share-active.png" />
					</a>
				</header>
			</transition>
			<transition name="fade">
				<header v-if="!scrolled" class="aui-bar aui-bar-nav aui-border-b aui-font-size-16" style="background-color:#fff !important;padding:0 .75rem;padding-top:2rem;display:flex;text-align:center;color:#222222;">
					<div tapmode onclick="close_win()" style="flex:2;position:relative;">
						<img class="btn-img-back" src="../../image/btn/btn-back-2.png" style="width:1.1rem;float:right;position:absolute;bottom:.55rem;left:0;" />
					</div>
					<div style="flex:6;font-size:.8;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);">
						<span :class="{'active':index==0}" tapmode onclick="tapindex(0)" style="margin-right:3rem;display:inline-block;height:100%;padding:0 .3rem;font-size:.8rem;font-family:PingFangSC-Medium;font-weight:500;color:rgba(34,34,34,1);">商品</span>
						<span :class="{'active':index==1}" tapmode onclick="tapindex(1)" style="display:inline-block;height:100%;padding:0 .3rem;font-size:.8rem;font-family:PingFangSC-Medium;font-weight:500;color:rgba(34,34,34,1);">详情</span>
					</div>
					<div tapmode onclick="openSharebox()" style="flex:2;position:relative;">
						<img class="btn-img-share" src="../../image/btn/btn-share-2.png" style="width:1.1rem;float:right;position:absolute;bottom:.55rem;right:0;" />
					</div>
				</header>
			</transition>
		</div>

		<div>
			<!--轮播开始-->
			<div style="display:inline-block;height:18.75rem;width:100%;background-color:#fff; overflow: hidden;position: relative;margin-top:2.4rem;transform:translateY(1.4rem);">
				<!-- 视频//图片 切换按钮 -->
				<div v-if="tabId===0" style="width:5rem;height:1.1rem;left:50%;transform:translateX(-50%);position:absolute;bottom:.65rem;z-index:99;display:flex;font-size:.55rem;text-align:center;color:#333333;">
					<!-- :class="{'active':index==0}"  class="{tabId=0}"-->
					<div style="flex:1;margin-right:.5rem;">
						<span @click="tabId=0" :class="{'fox':tabId==0}" style="display:inline-block;width:2.35rem;height:1.1rem;line-height:1.1rem;border-radius:.55rem;background-color:#fff;">视频</span>
					</div>
					<div style="flex:1;">
						<span @click="tabId=1" :class="{'fox':tabId==1}" style="display:inline-block;width:2.35rem;height:1.1rem;line-height:1.1rem;border-radius:.55rem;background-color:#fff;">图片</span>
					</div>
				</div>
				<!-- 视频//图片切换显示部分 -->
				<div class="tab-con">
					<!-- 视频部分 -->
					<!-- <div  v-show="tabId===0" class="video" style="display:none;width:100%;height:14.5rem;">
								<video @click="open_video_win(goodsinfo.video)"  style="display:inline-block;width:100%;height:100%;vertical-align: middle;"></video>
						</div> -->
					<div v-show="tabId===0" style="width:100%;height:18.75rem;">
						<iframe width="100%" height="100%" :src="goodsinfo.video" allowfullscreen></iframe>
					</div>
					<!-- <div v-show="tabId===0" style="width:100%;height:14.5rem;">
						<video width="100%" height="100%" :src="goodsinfo.video" preload="auto">
											您的浏览器不支持 video 标签。
						</video>
					</div> -->
					<!-- 图片部分 -->
					<div v-show="tabId===1">
						<div class="swiper-container">
							<div class="swiper-wrapper">
								<div v-for="vo in goodsinfo.img" class="swiper-slide" style="display:inline-block;height:18.75rem;">
									<img :src="vo" style="width:auto;height: 18.75rem;margin-top:50%;transform:translateY(-50%);" />
								</div>
							</div>
						</div>
						<div class="swiper-pagination" style="background-color:rgba(0,0,0,.4);color:#fff;"></div>
					</div>
				</div>
			</div>

			<!-- 距离开始 -->
			<div class="goods-active-content aui-bg-linear" style="margin-top:1rem;">
				<div class="start">
					距开始：<span v-html="settime(goodsinfo.miao_start_date,now_time)"></span>
				</div>
			</div>

			<!-- 商品规格服务 -->
			<div class="goods-info ming-bg-white" style="background-color:#f6f6f6;margin-top:-.5rem;">
				<!-- 标价/快递 -->
				<div style="display:flex;flex-direction:column;width:100%;background-color:green;">
					<div style="background-color:#fff;display:inline-block;line-height:2.05rem;color: #FF6642;font-weight:bold;padding:0 .75rem;font-family:Akrobat-Bold;padding-top:.75rem;padding-bottom:.45rem;">
						<span class="aui-font-size-18">￥<span style="font-size: 1.50rem !important;">{{price_format('yuan',goodsinfo.current_price)}}</span>
						<span class="aui-font-size-18">.{{price_format('fen',goodsinfo.current_price)}}</span></span>
						<del class="aui-font-size-14" style="color:#999999;margin-left:.4rem;font-family:PingFangSC-Regular;font-weight:400;">￥{{goodsinfo.cost_price}}</del>
						<span style="color:#999999;line-height:2.05rem;float:right;">
								<span style="display:inline-block;font-size:.65rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(153,153,153,1);">快递：{{goodsinfo.exp_fee}}</span>
						</span>
					</div>

					<!-- 商品名称/标签 -->
					<div class="aui-ellipsis-2" style="background-color:#fff;display:inline-block;width:100%;padding:0 .75rem;overflow:hidden;font-size:.8rem;font-family:PingFangSC-Medium;font-weight:500;color:rgba(34,34,34,1);">
						<span v-if="goodsinfo.sign!=''" style="font-size:.55rem;display:inline-block;width:1.6rem;height:.9rem;color:#fff;background:linear-gradient(135deg,rgba(132,229,255,1) 0%,rgba(107,180,255,1) 100%,rgba(122,174,229,1) 100%);border-radius:.1rem;text-align:center;line-height: .9rem;transform:translateY(-.1rem);">{{goodsinfo.sign}}</span>						{{goodsinfo.title}}
					</div>
					<span style="display:inline-block;width:100%;height:.75rem;background-color:#fff;"></span>
				</div>

				<!-- 规格/服务 -->
				<div style="width:100%;height:5rem;display:flex;flex-direction:column;line-height:2.5rem;font-size:.65rem;">
					<div tapmode @click="attr_show=true" style="flex:1;background-color:#fff;color:#999999;padding:0 .75rem;">
						<div style="font-family:PingFangSC-Regular;font-weight:400;border-bottom:1px solid #EEEEEE;">
							规格
							<span v-for="vo in good_sku_view" style="color:#222222;margin-left:.6rem;font-family:PingFangSC-Medium;font-weight:500;">{{vo}}</span>
							<img style="height: .65rem;display:inline-block;float:right;margin-top:1rem;" src="../../image/btn/btn-right.png" />
						</div>
					</div>
					<div tapmode @click="serve_show=true" style="flex:1;background-color:#fff;color:#999999;padding:0 .75rem;font-family:PingFangSC-Regular;font-weight:400;">
						服务
						<span v-for="vo in goodsinfo.service_name_view" style="color:#222222;margin-left:.6rem;font-family:PingFangSC-Medium;font-weight:500;">{{vo}}</span>
						<img style="height: .65rem;display:inline-block;float:right;margin-top:1rem;" src="../../image/btn/btn-right.png" />
					</div>
				</div>
			</div>

			<!-- 商品详情 -->
			<div class="goods-detail" style="display:inline-block;width:100%;padding:0 .75rem;margin-top:.5rem;background-color:#fff;padding-bottom:3rem;">
				<div style="display:inline-block;width:100%;height:2.65rem;line-height:2.65rem;font-size:.85rem;font-family:PingFangSC-Semibold;font-weight:600;color:rgba(51,51,51,1);">
					<!-- 两竖线 -->
					<img src="../../image/icon/lines.png" style="display:inline-block;width:.15rem;height:.75rem;transform:translateY(.15rem);" /> 商品详情
				</div>
				<!-- 详情内容块 -->
				<div v-html="goodsinfo.content" style="overflow:hidden;font-size:.8rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(34,34,34,1);"></div>
			</div>
		</div>

		<!-- 底部操作栏 -->
		<div id="aui-footer" class="aui-bar aui-bar-tab aui-border-t">
			<div id="aui-footer2" class="aui-bar aui-bar-tab" style="border-top:1px solid #EEEEEE;display:flex;height:2.7rem;background-color:#fff;padding:0 .75rem;align-items:center;justify-content:space-between;">
				<!-- 客服 事件未绑定 -->
				<div class="footer_icon_wraper" style="display:flex;">
					<!-- 客服 -->
					<div tapmode onclick="openmeiQia()">
						<img src="../../image/icon/service.png">
						<span>客服</span>
					</div>
					<!-- 收藏 -->
					<div>
						<img v-if="goodsinfo.is_collect=='1'" src="../../image/icon/star_active.png">
						<img v-if="goodsinfo.is_collect=='0'" src="../../image/icon/star_noselect.svg">
						<span tapmode onclick="fav_good()" v-if="goodsinfo.is_collect=='0'">收藏</span>
						<span tapmode onclick="fav_good()" v-if="goodsinfo.is_collect=='1'">已收藏</span>
					</div>
					<!-- 购物车 -->
					<div tapmode onclick="openTocart()">
						<img src="../../image/icon/new-shopping.png" alt="">
						<span>购物车</span>
					</div>
				</div>
				<div style="display:flex;margin-top:.35rem;">
					<!-- 加入购物车-立即购买-已售空 -->
					<div style="display:inline-block;width:100%;height:2.7rem;display:flex;margin-top:.3rem;">
						<div tapmode @click="if(vm.loginout) {openWin_login();return;};is_cart=true;attr_show=true" class="join_car" >
							加入购物车
						</div>
						<div v-if="!is_remind(miao_id,id)" tapmode @click="add_remind(miao_id,id)" class="buy_now">
							提醒我
						</div>
						<div v-if="is_remind(miao_id,id)" tapmode @click="remove_remind(miao_id,id)" class="empty">
							取消提醒
						</div>
					</div>
				</div>
			</div>
		</div>


		<!--基础保障弹窗-->
		<div v-if="serve_show">
			<div class="aui-mask aui-mask-in" style="z-index: 991;" tapmode @click="serve_show=false"></div>
			<div class="ming-bg-white" style="position: fixed;bottom: 0;width: 100%;z-index: 992;">
				<img tapmode @click="serve_show=false" style="position: absolute;height: 1.1rem;right: .8rem;top: .8rem;" src="../../image/btn/btn-close-wind.png" />
				<div class="aui-text-center" style="border-bottom:1px solid #EDEDF0;color:#323233;font-size:.8rem;font-weight:500;margin-bottom:15px;display:inline-block;width:100%;height:2.75rem;line-height:2.75rem;text-align:center;font-family:PingFangSC-Medium;">
					基础保障
				</div>
				<div style="overflow-y: scroll;height: 60vh;padding:0 .85rem;">
					<div v-for="vo in goodsinfo.service_name" class="aui-info" style="padding-top: 0;padding-bottom: 1.05rem;align-items: flex-start;">
						<!-- 图标要跟随变换 -->
						<div>
							<img style="height: 1.1rem;display: inline-block;" src="../../image/icon/icon-success-red.png" />
						</div>
						<div class="ming-text-hui" style="flex:1;padding-left: 0.75rem;display: block;">
							<div class="aui-margin-b-15" style="color:#333333;font-weight:600;font-family:PingFangSC-Semibold;line-height:1.05rem;font-size:.75rem;">
								{{vo.service_name}}
							</div>
							<div class="aui-font-size-14" style="color:#333333;font-weight:400;font-family:PingFangSC-Regular;line-height:1rem;margin-top:.5rem;">
								{{vo.intro}}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<!--加入购物车弹窗-->
		<div v-if="attr_show">
			<div class="aui-mask aui-mask-in" style="z-index: 991;" tapmode @click="attr_show=false" @touchmove.prevent></div>
			<div class="ming-bg-white" style="padding: 0 0.75rem;position: fixed;bottom: 0;width: 100%;z-index: 992;padding-bottom: 2.2rem;max-height: 80%;">
				<img tapmode @click="attr_show=false" style="position: absolute;height: 1.1rem;width:1.1rem;right: 0.5rem;top: 1rem;" src="../../image/btn/btn-close-wind.png" />
				<!-- 商品图片 -->
				<img class="aui-img-round-5" style="position: absolute;display:inline-block;width:4rem;height: 4rem;left: 0.75rem;top: 1.0rem;" :src="goodsinfo.cover" />
				<!-- 价位 库存 已选择 -->
				<div style="margin-left:5.5rem;margin-top:1rem;display:inline-block;height:4rem;">
					<div>
						<div style="display:inline-block;width:3rem;height:1.4rem;color: #FF6642;font-weight:600;">
							<span style="font-size:.75rem;font-family:PingFangSC-Semibold;font-weight:600;color:rgba(255,102,66,1);">￥{{price}}</span>
						</div>
						<div class=" aui-font-size-12" style="color:#969699;">
							<span style="display:inline-block;font-size:.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(150,150,153,1);">库存:&nbsp {{kucun}}件</span><br>
							<span class="aui-padded-r-5" style="display:inline-block;transform:translateY(.9rem);font-size:.6rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(51,51,51,1);">已选择:&nbsp <span v-for="vo in good_sku_view">{{vo}}</span></span>
						</div>
					</div>
				</div>

				<div style="height: 13rem;overflow-y: scroll;">
					<div v-for="(vo,index) in goodSku.good_attr" style="padding-top: 1.25rem;">
						<div class="aui-margin-b-15" style="font-size:.7rem;font-family:PingFangSC-Regular;font-weight:400;color:rgba(51,51,51,1);">
							{{vo.name}}
						</div>
						<div v-for="item in vo.sub" tapmode @click="$set(good_sku_view,index,item)" :class="{'listem':item==good_sku_view[index]}" style="display:inline-block;padding:.25rem .9rem;text-align:center;color:#323233;background-color:#F6F6F6;border-radius:.7rem;font-size:.6rem;margin-right:.45rem;margin-bottom:.5rem;">
							{{item}}
						</div>
					</div>
					<!-- 添加购买数量 -->
					<div style="display:flex;flex-direction:column;float:left;margin-top:1rem;">
						<div class="aui-font-size-14 aui-text-default" style="display:inline-block;flex:1;margin-bottom:.5rem;text-align:left;width:100%;height:100%;font-family:PingFangSC-Regular;font-weight:400;color:rgba(51,51,51,1);">
							购买数量
						</div>
						<div class="aui-font-size-14" style="display:inline-block;height:1.5rem;flex:1;">
							<div tapmode @click="if(count<2)return;count-=1;" class="aui-text-center aui-btn-plus" style="float:left;border:1px solid #e1e1e5;width:1.6rem;height:1.5rem;line-height:1.5rem;">
								-
							</div>
							<div class="aui-text-center aui-text-default" style="float:left;border:1px solid #e1e1e5;width:2.1rem;height:1.5rem;line-height:1.5rem;border-left:0;border-right:0;">
								{{count}}
							</div>
							<div tapmode @click="if(count>=kucun){count=kucun;return;};count+=1" class="aui-text-center aui-btn-plus" style="float:left;border:1px solid #e1e1e5;width:1.6rem;height:1.5rem;line-height:1.5rem;">
								+
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 点击"确定"购买 -->
			<div tapmode @click="if(kucun==0)return;attr_show=false;createGoodCart()" class="aui-btn aui-btn-block ming-text-white aui-font-size-16" :class="{'aui-bg-linear':kucun>0}" style="position: fixed;bottom: 1rem;width: 17.25rem;z-index: 999;height: 2rem;line-height: 2rem;border-radius: 1.25rem;margin-left:50%;transform:translateX(-50%);">
				确定
			</div>
		</div>

		<!-- 获取金币 -->
		<div v-show="share_show" class="aui-mask aui-mask-in" style="z-index:9999;">
			<div class="aui-text-center" style="width: 11rem;height: 155px;margin-left: calc(50vw - 110px);margin-top: calc(40vh - 78px);position: relative;">
				<img style="width: 11rem;height: 7.75rem;" src="../../image/bg/bg-share-gold.png" />
				<div style="background:#fff;position: absolute;width: 100%;">
					<span style="font-size: 1.5rem;padding-bottom: .85rem;">+{{share_gold}}</span>
					<p class="aui-font-size-13" style="padding-bottom: .85rem;">恭喜您获得金币奖励</p>
				</div>
				<div align="center" @click="share_show_hide()">
					<img style="max-height: 100%;max-width: 800%;margin-top:60px;" src="../../image/bg/bg-share-gold-bottom.png" />
				</div>
			</div>
		</div>
	</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-sharebox.js"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			id: 0,
			miao_id: 0,
			time_id: 0,
			tabId: 1,
			index: 0,
			scrolled: false,
			serve_show: false,
			attr_show: false,
			good_sku_view: [],
			type: 'miao', //'good'普通商品falg-2,'tuan'团购商品falg-4，'miao'秒杀商品falg-3，对应返回的page字段
			goodsinfo: {},
			goodSku: {},
			count: 1,
			is_cart: false,
			now_time: Date.parse(new Date()) / 1000,
			share_pic: '',
			pic_done: false,
			loginout: false,
			share_show: false,
			share_gold: 0,
			remind: [],
			miao_start_time: 0,
		},
		methods: {
			get_goodSku: function() {
				get_data('api/Good/goodSku', {
					good_id: vm.id
				}, function(ret) {
					if (ret.status) {
						vm.goodSku = ret.data
					}
				})
			},
			goodDetails: function() {
				get_data('api/Good/goodDetails_miao', {
					token: $api.getStorage('token'),
					good_id: vm.id,
					miao_id: vm.miao_id,
					time_id: vm.time_id
				}, function(ret) {
					if (ret.status) {
						vm.goodsinfo = ret.data
						vm.good_sku_view = ret.data.good_sku_view
						swiper_init()
						if (!vm.goodsinfo.cover) {
							vm.share_pic = '../../image/logo.jpg'
							vm.pic_done = true
						} else {
							download(vm.goodsinfo.cover, function(ret) {
								compress_pic(ret, function() {
									vm.share_pic = ret;
									vm.pic_done = true
								})
							})
						}
					} else {
						if (ret.msg == '商品已下架了11') {
							toast(ret.msg)
							send_event('goodsref')
							delay_close(600)
						}
					}
				})
			},
			price_format: function(type, price) {
				var status = (price + '').indexOf('.')
				if (status == '-1') {
					if (type == 'yuan') {
						return price;
					}
					if (type == 'fen') {
						return '00';
					}
				}
				var price_array = (price + '').split('.')
				if (type == 'yuan') {
					return price_array[0];
				}
				if (type == 'fen') {
					var price_fen = price_array[1].length < 2 ? price_array[1] + '0' : price_array[1];
					return price_fen;
				}
			},
			createGoodCart: function() {
				if (vm.loginout) {
					openWin_login();
					return;
				}
				if (this.count == '0') {
					toast('您当前选择的商品没有库存')
					return;
				}
				if (this.is_cart) {
					get_data('api/GoodCart/createGoodCart', {
						token: $api.getStorage('token'),
						good_id: this.id,
						good_num: this.count,
						good_sku: this.good_sku_view.join('|')
					}, function(ret) {
						toast(ret.msg)
						if (ret.status) {

						}
					})
				} else {
					$api.setStorage('goods_info', {
						info: [{
							good_id: vm.id,
							cover: vm.goodsinfo.cover,
							title: vm.goodsinfo.title,
							cost_price: vm.type == 'tuan' ? vm.goodsinfo.tuan_price : vm.goodsinfo.current_price,
							good_sku: vm.good_sku_view.join('|'),
							good_num: vm.count
						}]
					})
					var flag = vm.type == 'good' ? 2 : vm.type == 'tuan' ? 4 : 3
					if (flag == 4) {
						$api.setStorage('tuan_id', vm.goodsinfo.tuan_id)
					}
					if (flag == 3) {
						$api.setStorage('miao_id', vm.goodsinfo.miao_id)
					}
					$api.setStorage('flag', flag)
					openWin_create_order()
				}
			},
			settime: function(time, nowtime) {
				var data = TimeCountDowns(time, nowtime);
				if (data != '0') {
					return '<span style="display:inline-block;width:1.1rem;height:1.1rem;line-height:1.1rem;text-align:center;border-radius:.1rem;background-color:#fff;color:#FF6642;">' + data.hours +
						'</span><span style="margin:0 .25rem">:</span><span style="display:inline-block;width:1.1rem;height:1.1rem;line-height:1.1rem;text-align:center;border-radius:.1rem;background-color:#fff;color:#FF6642;">' + data.minutes +
						'</span><span style="margin:0 .25rem">:</span><span style="display:inline-block;width:1.1rem;height:1.1rem;line-height:1.1rem;text-align:center;border-radius:.1rem;background-color:#fff;color:#FF6642;">' + data.seconds + '</span>';
				} else {
					return '已结束';
				}
			},
			settime_tuan: function(time, nowtime) {
				//					需要返回天数
				var data = TimeCountDownfull(time, nowtime);
				if (data != '0') {
					if (data.days > 0) {
						return '<span style="display:inline-block;width:1.1rem;height:1.1rem;line-height:1.1rem;text-align:center;border-radius:.1rem;background-color:#fff;color:#FF6642;">' + data.hours +
							'</span><span style="margin:0 .25rem">:</span><span style="display:inline-block;width:1.1rem;height:1.1rem;line-height:1.1rem;text-align:center;border-radius:.1rem;background-color:#fff;color:#FF6642;">' + data.minutes +
							'</span><span style="margin:0 .25rem">:</span><span style="display:inline-block;width:1.1rem;height:1.1rem;line-height:1.1rem;text-align:center;border-radius:.1rem;background-color:#fff;color:#FF6642;">' + data.seconds + '</span>';
					}
					return '<span style="display:inline-block;width:1.1rem;height:1.1rem;line-height:1.1rem;text-align:center;border-radius:.1rem;background-color:#fff;color:#FF6642;">' + data.hours +
						'</span><span style="margin:0 .25rem">:</span><span style="display:inline-block;width:1.1rem;height:1.1rem;line-height:1.1rem;text-align:center;border-radius:.1rem;background-color:#fff;color:#FF6642;">' + data.minutes +
						'</span><span style="margin:0 .25rem">:</span><span style="display:inline-block;width:1.1rem;height:1.1rem;line-height:1.1rem;text-align:center;border-radius:.1rem;background-color:#fff;color:#FF6642;">' + data.seconds + '</span>';
				} else {
					return '已结束';
				}
			},
			is_remind: function(act_id, good_id) {
				var status = false;
				vm.remind.forEach(function(el) {
					if (el.miao_id == act_id && el.good_id == good_id) {
						status = true
					}
				})
				return status;
			},
			add_remind: function(act_id, good_id) {
				var data = vm.remind;
				var newdata = {
					miao_id: act_id,
					good_id: good_id,
					time: vm.miao_start_time
				}
				data.push(newdata)
				vm.remind = data
				$api.setStorage('remind', data)
					//					发送事件给首页
				send_event('remind_add')
				toast('设置成功，将在开抢时提醒您')
			},
			remove_remind: function(act_id, good_id) {
				var data = vm.remind;
				var newdata = []
				data.forEach(function(el, index) {
					if (el.miao_id == act_id && el.good_id == good_id) {

					} else {
						newdata.push(el)
					}
				})
				vm.remind = newdata
				$api.setStorage('remind', newdata)
					//					发送事件给首页
				send_event('remind_add')
				toast('已取消秒杀提醒~')
			},
		},
		computed: {
			kucun: function() {
				var kucun = false;
				if (this.good_sku_view.length == 0) {
					return this.goodsinfo.stock_num;
				}
				if (this.good_sku_view.length != this.goodSku.good_attr.length) {
					vm.count = 0
					return 0;
				}
				var name = this.good_sku_view.join('|');
				this.goodSku.good_sku.forEach(function(el) {
					if (name === el.good_sku) {
						if (el.stock_num) {
							kucun = el.stock_num;
							vm.count = 1
						} else {
							kucun = 0
							vm.count = 0
						}
					}
				})
				if (!kucun) {
					kucun = 0
					vm.count = 0
				}
				return kucun;
			},
			price: function() {
				var price = this.goodsinfo.current_price * this.count;
				return price.toFixed(2);
			}
		}
	})
	apiready = function() {
		$api.fixStatusBar($api.byId('aui-header'))
		vm.id = $api.getStorage('id')
		vm.miao_id = $api.getStorage('miao_id')
		vm.time_id = $api.getStorage('time_id')
		vm.miao_start_time = $api.getStorage('miao_start_time')
		vm.goodDetails()
		vm.get_goodSku()
		authToken()
		setInterval(function() {
			vm.now_time = Date.parse(new Date()) / 1000
		}, 200)
		add_event('tuan_ref', function(ret) {
			vm.goodDetails()
			vm.get_goodSku()
		})
		add_event('logined', function(ret) {
			authToken()
			vm.goodDetails()
			vm.get_goodSku()
		})
		fnInitPullRefresh(function() {
				vm.goodDetails()
				vm.get_goodSku()
			})
			// 新版刷新
		refresh_new(function() {
			setTimeout(function() {
				vm.goodDetails()
				vm.get_goodSku()
				api.refreshHeaderLoadDone()
			}, 1000)
		})


		if ($api.getStorage('remind')) {
			vm.remind = $api.getStorage('remind')
		}
	};

	function authToken() {
		get_data('api/login/isToken', {
			token: $api.getStorage('token')
		}, function(ret) {
			if (ret.status == '0') {
				vm.loginout = true
			}
			if (ret.status == '1') {
				vm.loginout = false
			}
		})
	}

	function tapindex(index) {
		if (vm.index != index) {
			vm.index = index
			var header_h = 45;
			if (index == 0) {
				document.documentElement.scrollTop = $api.offset($api.dom('.goods-info')).t - header_h
				document.body.scrollTop = $api.offset($api.dom('.goods-info')).t - header_h
			}
			if (index == 1) {
				document.documentElement.scrollTop = $api.offset($api.dom('.goods-ping')).t - header_h
				document.body.scrollTop = $api.offset($api.dom('.goods-ping')).t - header_h
			}
			if (index == 2) {
				document.documentElement.scrollTop = $api.offset($api.dom('.goods-detail')).t - header_h
				document.body.scrollTop = $api.offset($api.dom('.goods-detail')).t - header_h
			}
		}
	}

	function swiper_init() {
		setTimeout(function() {
			var swiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				paginationType: 'fraction',
				autoplay: false, //可选选项，自动滑动
				loop: true, //可选选项，是否循环
				autoplayDisableOnInteraction: false, //注意此参数，默认为true
				mode: 'horizontal',
				freeMode: false,
				followFinger: false,
				observer: true, //修改swiper自己或子元素时，自动初始化swiper
				observeParents: true, //修改swiper的父元素时，自动初始化swiper
			});
			$api.fixTabBar($api.byId('aui-footer'))
		}, 50)
	}
	window.onscroll = function() {
			//变量t是滚动条滚动时，距离顶部的距离
			var t = document.documentElement.scrollTop || document.body.scrollTop;
			var header_h = 45; //$api.offset($api.byId('aui-header')).h
			var goods_info_height = $api.offset($api.dom('.goods-info')).t - header_h - 2 //
			var goods_ping_height = $api.offset($api.dom('.goods-ping')).t - header_h //
			var goods_detail_height = $api.offset($api.dom('.goods-detail')).t - header_h //
			if (t > goods_info_height) {
				vm.scrolled = true
			} else {
				vm.scrolled = false
			}
			if (t > goods_info_height && t < goods_ping_height) {
				if (vm.index != 0) {
					vm.index = 0;
				}
			}
			if (t > goods_ping_height && t < goods_detail_height) {
				if (vm.index != 1) {
					vm.index = 1;
				}
			}
			if (t > goods_detail_height) {
				if (vm.index != 2) {
					vm.index = 2;
				}
			}
		}
		//		打开购物车
	function openTocart() {
		api.execScript({
			name: 'root',
			script: 'openTocart()'
		});
		closeToRoot()
	}
	//		关注商品
	function fav_good() {
		var status = vm.goodsinfo.is_collect
		opera(vm.id, 'good', 2, function(ret) {
			if (ret.status) {
				send_event('fav_ref')
				if (status == '1') {
					Vue.set(vm.goodsinfo, 'is_collect', '0')
					toast('取消收藏成功')
				} else {
					toast('收藏成功')
					Vue.set(vm.goodsinfo, 'is_collect', '1')
				}
			}
		})
	}
	//		我要开团
	function joinTuan() {
		get_data('api/Tuan/pinTuan', {
			token: $api.getStorage('token'),
			tuan_id: vm.goodsinfo.tuan_id,
			good_id: vm.id,
		}, function(ret) {
			if (ret.status) {
				openWin_pintuan_details(ret.data.id)
				setTimeout(function() {
					close_win()
				}, 1000)
			}
		})
	}
	var sharebox;

	function openSharebox() {
		if (!$api.getStorage('token')) {
			openWin_login()
			return;
		}
		if (sharebox && sharebox.maskDiv) {
			sharebox.close();
			return;
		}
		sharebox = new auiSharebox();
		sharebox.init({
			frameBounces: true, //当前页面是否弹动，（主要针对安卓端）
			buttons: [{
				image: '../../image/btn/btn-weixin.png',
				text: '微信好友',
				value: 'wx' //可选
			}, {
				image: '../../image/btn/btn-weixin-2.png',
				text: '朋友圈',
				value: 'wx-circle'
			}],
			col: 3,
			shareTitle: '分享到' //可选,当然也可以采用下面的方式使用图标
		}, function(ret) {
			if (ret) {
				console.log(ret.buttonIndex + '/' + ret.buttonValue)
				if (ret.buttonIndex == 1) {
					shareTowx('session')
				}
				if (ret.buttonIndex == 2) {
					shareTowx('timeline')
				}
				if (ret.buttonIndex == 3) {
					shareTowb()
				}
			}
		})
	}

	function openSharebox_tuan() {
		var sharebox = new auiSharebox();
		sharebox.init({
			frameBounces: true, //当前页面是否弹动，（主要针对安卓端）
			buttons: [{
				image: '../../image/btn/btn-weixin.png',
				text: '微信好友',
				value: 'wx' //可选
			}, {
				image: '../../image/btn/btn-weixin-2.png',
				text: '朋友圈',
				value: 'wx-circle'
			}],
			col: 3,
			shareTitle: '邀请好友参团' //可选,当然也可以采用下面的方式使用图标
		}, function(ret) {
			if (ret) {
				console.log(ret.buttonIndex + '/' + ret.buttonValue)
				if (ret.buttonIndex == 1) {
					shareTowx('session')
				}
				if (ret.buttonIndex == 2) {
					shareTowx('timeline')
				}
				if (ret.buttonIndex == 3) {
					shareTowb()
				}
			}
		})
	}

	function shareTowx(type) {
		var contentUrl = 'http://zm.zonmay.com/wap/share/goods/id/' + vm.id + '.html'
		var title = vm.goodsinfo.title
		var wx = api.require('wxPlus');
		wx.isInstalled(function(ret, err) {
			if (ret.installed) {} else {
				toast('当前设备未安装微信客户端');
				return;
			}
		});
		wx.shareWebpage({
			scene: type,
			title: title,
			description: title,
			contentUrl: contentUrl,
			thumb: vm.share_pic
		}, function(ret, err) {
			if (ret.status) {
				toast('分享成功');
				get_data('api/user/shareTakeGold', {
					token: $api.getStorage('token')
				}, function(ret) {
					if (ret.status) {
						vm.share_gold = ret.data.gold
						vm.share_show = true
						setTimeout(function() {
							vm.share_show = false
						}, 300000)
					}
				})
			} else {
				if (err.code == '2') {
					toast('取消分享');
				}
				console.log(err.code);
			}
		});
	}

	function shareTowb() {
		var contentUrl = 'http://zm.zonmay.com/wap/share/goods/id/' + vm.id + '.html'
		var title = vm.goodsinfo.title
		var weibo = api.require('weiboPlus');
		weibo.shareWebPage({
			text: title + '。详情点击链接查看',
			title: title,
			description: title,
			thumb: vm.share_pic,
			contentUrl: contentUrl
		}, function(ret, err) {
			console.log(JSON.stringify(ret))
			if (ret.status) {
				toast('分享成功');
				get_data('api/user/shareTakeGold', {
					token: $api.getStorage('token')
				}, function(ret) {
					if (ret.status) {
						vm.share_gold = ret.data.gold
						vm.share_show = true
						setTimeout(function() {
							vm.share_show = false
						}, 300000)
					}
				})
			} else {
				if (err.code == '1') {
					toast('取消分享');
				}
				console.log(JSON.stringify(err))
			}
		});
	}

	function share_show_hide() {
		vm.share_show = false;
	}
</script>

</html>
